<template>
  <div class="map-index">
    <div class="map-index-cloumn">
      <div
        v-for="(item, index) in mapIndex[mapIndexEQ]"
        :key="'map-index' + index"
        :title="item"
        class="map-index-cloumn-cont"
        :class="{'map-index-cloumn-active': mapIndexAC === item}"
        @click="handleMapIndexClick(item)"
      >
        {{ item }}
      </div>
    </div>
    <div class="map-index-btns">
      <span
        :class="mapIndexEQ === 0 ? 'map-index-btn-disabled' : ''"
        @click="handleMapArrowClick('minus', mapIndexEQ)"
        v-html="'<'"
      />
      {{ mapIndexEQ + 1 + '/' + mapIndex.length }}
      <span
        :class="mapIndexEQ+1 === mapIndex.length ? 'map-index-btn-disabled' : ''"
        @click="handleMapArrowClick('add', mapIndexEQ)"
        v-html="'>'"
      />
    </div>
  </div>
</template>

<script>
import { getJCYZList } from '@/api/common'

export default {
  props: {
    mapType: {
      type: String,
      default: '地表水断面'
    }
  },
  data() {
    return {
      mapIndex: [],
      mapIndexAC: '水质类别',
      mapIndexEQ: 0
    }
  },
  watch: {
    mapType(newVal) {
      this.mapIndexAC = '水质类别'
      this.getJCYZList()
    }
  },
  mounted() {
    this.getJCYZList()
  },
  methods: {
    handleMapIndexClick(item) {
      this.mapIndexAC = item
      this.$emit('factorCallback', item)
    },
    handleMapArrowClick(type, val) {
      if (type === 'minus') { // 减少页码
        if (val !== 0) {
          this.mapIndexEQ = val - 1
        }
      } else { // 增加页码
        if (val + 1 !== this.mapIndex.length) {
          this.mapIndexEQ = val + 1
        }
      }
    },
    // 获取地图上监测因子的集合
    async getJCYZList() {
      if (this.mapType == '地表水自动站') {
        var datas = ['水质类别', 'pH', '溶解氧', '高锰酸盐指数', '化学需氧量', '氨氮', '总磷']
        let arr = []
        this.mapIndex = []
        datas.forEach((v, k) => {
          arr.push(v)
          if (k !== 0 && (k + 1) % 6 === 0 || k + 1 === datas.length) {
            this.mapIndex.push(arr)
            arr = []
          }
        })
        this.mapIndexAC = '水质类别'
        return
      } else {
        this.mapIndexAC = '水质类别'
      }
      const { status, data } = await getJCYZList({
        type: this.mapType
      })
      if (status === 0 && data) {
        let arr = []
        this.mapIndex = []
        data.forEach((v, k) => {
          if (v == 'PH') {
            v = 'pH'
          }
          arr.push(v)
          if (k !== 0 && (k + 1) % 6 === 0 || k + 1 === data.length) {
            this.mapIndex.push(arr)
            arr = []
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map-index {
  width: 4vw;
  font-size: 0.73vw;
  background: #1B3559;
  margin-bottom: 1.85vh;

  .map-index-cloumn {
    padding: 0.5vh 0;

    .map-index-cloumn-cont {
      height: 3vh;
      line-height: 3vh;
      color: #c3d3ed;
      text-align: center;
      margin: 0 auto;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .map-index-cloumn-active {
      background-color: #3db4ff;
    }
  }

  .map-index-btns {
    height: 2.78vh;
    line-height: 2.78vh;
    text-align: center;
    background: #215689;

    span {
      cursor: pointer;
    }

    .map-index-btn-disabled {
      color: #709fcc;
      cursor: not-allowed;
    }
  }
}
</style>
